<template>
	<div id="detail">
		<div id="nav-bar" >
			<nav-bar>
				<div slot="left">
					<div id="logo" style="width: 60px;">
						<img src="../../../public/jesus.png" style="width:100%"/>
					</div>
				</div>
				<div slot="right" class="right">					
					<div v-for="(item,index) in route" @click="toPage(item)" :key="index">
						<span>{{txt[index]}}</span>
					</div>
					<avatar v-show="this.common.isLogin" class="avatar"
							@click.native="toPage('/profile')"></avatar>
					<div id="login" @click="toPage('/login')" v-show="!this.common.isLogin">
						<span>登录</span>
					</div>
					<div id="register" @click="toPage('/register')" v-show="!this.common.isLogin">
						<span>注册</span>
					</div>
				</div>
			</nav-bar>
		</div>
		
		<div class="display" v-if="Content && author_msg">
			<div class="transition">
				<h1 >
					{{Content.data[0].title}}
				</h1>
				<div class="userinfo">
					<div class="avatar">
					    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
					</div>
					<div class="txt">
						<div class="row1">
							<span>{{author_msg.body.nickname}}</span>
						</div>
						<div class="row2">
							<span>{{Content.data[0].pub_date}} </span>
							<span style="margin-left: 5px;" v-if="Compute"> <span style="color: #1E80FF;cursor: pointer;" @click="toEdit">编辑</span></span>
						</div>
					</div>
				</div>
			</div>
			<!-- <div>	{{author_msg}}</div> -->
			<div style="white-space:pre-wrap;"
					v-html="Content.data[0].content">
				</div>
			
		</div>
		<Comment :cmtres="cmtComment.data" :cmtors="user_msg" v-if="cmtComment&&user_msg" :art_id="Id"></Comment>
	</div>
</template>

<script>
	import NavBar from 'components/common/NavBar.vue'
	import avatar from 'components/common/avatar.vue'
	import {getDetail,getComment} from 'network/detail.js' 
	import Comment from 'components/common/comment/comment.vue'
	import {getUsers}	from 'network/home.js'
	
	
	export default{
		name:"Detail",
		components:{
			Comment,
			NavBar,
			avatar,
		},
		data(){
			return {
				Content:null,
				cmtComment:null,
				Id:0,
				author_msg:null,
				user_msg:[],
				temp:Array,
				route:['/home','/category','/msg'],
				txt:['主页','分类','消息']
			}
		},
		computed:{
			Compute(){
				return this.common.userid==this.author_msg.body.id
			}
		},
		methods:{
			toEdit(){
				this.common.flag=this.Content.data[0].Id
				this.$router.push({
					path:'/edit',
				})
			},
			toPage(value){
				this.$router.push(value)
			},
		},
		created(){
			this.Id = this.$route.params.artId
			getDetail(this.Id).then(res=>{
					this.Content = res;
					getUsers(this.Content.data[0].author_id).then(res=>{
						this.author_msg = res;
						})
			}),
			
			getComment(this.Id).then(res=>{
				this.cmtComment = res;
				for(var i=0;i<res.data.length;i++)
					getUsers(res.data[i].user_id).then(res=>{
						this.user_msg.push(res.body) 
						
						})
			})
		},
	}
</script>

<style scoped="scoped">
	#detail{
		text-align:left;
		background-color: #e1e1e1;
	}
	#nav-bar{
		display: flex;
		height: 80px;
		background-color: white;
		border-bottom: 1px solid #f1f1f1;
		box-shadow:-10px -10px 15px;
	}
	.center{
		position: relative;
		padding: 6px;
	}
	.right{
		display: flex;
		cursor: pointer;
	}
	.right>div{
		color:black;
		flex:1;
		line-height: 80px;
		
	}
	.right>.avatar{
		padding-top: 10px;
	}
	#logo{
	  	margin-top: 5px;
	  }
	.display{
		background-color: #fff;
		border-radius: 5px;
		width: 90%;
		margin: 15px auto;
		padding:30px;
		box-sizing: border-box;
	}
	.userinfo{
		display: flex;
		padding: 10px;
	}
	.avatar{
		width: 40px;
		margin-right: 10px;
	}
	.txt{
		vertical-align:middle;
		line-height: 30px;
	}
	h1,h2,h3,h4,h5,h6{
		margin: 16px 0;
	}
	p{
		margin: 16px 0;
	}
</style>
